$layout-width: 1240px;
$layout-margin: 0px auto;
$layout-margin-xs: 0px auto;
$layout-padding: 20px 20px;
$layout-padding-xs: 20px 20px;
$layout-grid-1-width: 200px;
$layout-grid-1-width-xs: 100%;
$layout-grid-1-margin: 0;
$layout-grid-1-margin-xs: 0;
$layout-grid-1-padding: 0;
$layout-grid-1-padding-xs: 0;
$layout-grid-2-width: calc(100% - 200px);
$layout-grid-2-width-xs: 100%;
$layout-grid-2-margin: 0;
$layout-grid-2-margin-xs: 0;
$layout-grid-2-padding: 0;
$layout-grid-2-padding-xs: 0;

:root {
  /* ----------布局宽度---------- */
  --layout-width: #{$layout-width};
  /* ----------布局边距---------- */
  --layout-margin: #{$layout-margin};
  --layout-margin-xs: #{$layout-margin-xs};
  --layout-padding: #{$layout-padding};
  --layout-padding-xs: #{$layout-padding-xs};
  /* ----------布局网格---------- */
  --layout-grid-1-width: #{$layout-grid-1-width};
  --layout-grid-1-width-xs: #{$layout-grid-1-width-xs};
  --layout-grid-1-margin: #{$layout-grid-1-margin};
  --layout-grid-1-margin-xs: #{$layout-grid-1-margin-xs};
  --layout-grid-1-padding: #{$layout-grid-1-padding};
  --layout-grid-1-padding-xs: #{$layout-grid-1-padding-xs};

  --layout-grid-2-width: #{$layout-grid-2-width};
  --layout-grid-2-width-xs: #{$layout-grid-2-width-xs};
  --layout-grid-2-margin: #{$layout-grid-2-margin};
  --layout-grid-2-margin-xs: #{$layout-grid-2-margin-xs};
  --layout-grid-2-padding: #{$layout-grid-2-padding};
  --layout-grid-2-padding-xs: #{$layout-grid-2-padding-xs};
}
.layout-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.layout-grid-1 {
  width: 100%;
}
.layout-grid-2 {
  width: 100%;
}
.layout-block {
  max-width: var(--layout-width, $layout-width);
  margin: 0 auto;
}
@include media-breakpoint-up(md) {
  .layout-container {
    max-width: var(--layout-width, $layout-width);
    margin: var(--layout-margin, $layout-margin);
    padding: var(--layout-padding, $layout-padding);
  }
  .layout-grid-1 {
    max-width: var(--layout-grid-1-width, $layout-grid-1-width);
    margin: var(--layout-grid-1-margin, $layout-grid-1-margin);
    padding: var(--layout-grid-1-padding, $layout-grid-1-padding);
  }
  .layout-grid-2 {
    max-width: var(--layout-grid-2-width, $layout-grid-2-width);
    margin: var(--layout-grid-2-margin, $layout-grid-2-margin);
    padding: var(--layout-grid-2-padding, $layout-grid-2-padding);
  }
}
@include media-breakpoint-down(md) {
  .layout-container {
    margin: var(--layout-margin-xs, $layout-margin-xs);
    padding: var(--layout-padding-xs, $layout-padding-xs);
  }
  .layout-grid-1 {
    max-width: var(--layout-grid-1-width-xs, $layout-grid-1-width-xs);
    margin: var(--layout-grid-1-margin-xs, $layout-grid-1-margin-xs);
    padding: var(--layout-grid-1-padding-xs, $layout-grid-1-padding-xs);
  }
  .layout-grid-2 {
    max-width: var(--layout-grid-2-width-xs, $layout-grid-2-width-xs);
    margin: var(--layout-grid-2-margin-xs, $layout-grid-2-margin-xs);
    padding: var(--layout-grid-2-padding-xs, $layout-grid-2-padding-xs);
  }
}
